<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draggables Test Page</title>
<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<script type="text/javascript" src="../ui.draggable.ext.js"></script>


<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

fieldset
{
	margin: 20px;
}

li {
	position: relative;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	margin: 10px;
	padding: 10px;
	height: 70px;
	width: 500px;
	float: left;
	list-style-type: none;
}

.draggable {
	position: absolute;
	width: 100px;
	height: 40px;
	top: 10px;
	right: 10px;
	background-color: #68BFEF;
	border: 2px solid #0090DF;
	padding: 5px;	
}

div.drag-handle
{
	cursor: move;
	background-color: #900;
	height: 15px;
}

div.todo
{
	margin-top:16px;
	background: #eeeeee;
	width:300px;
}
div.todo span.todo-label
{
	color: red;
}
div.todo div.todo-desc
{
	font-style: italic;
	border-top:1px solid silver;
	background: #f7f7f7;
}
</style>
</head>
<body>
	<fieldset>
	<legend>options</legend>
	<ul>
	    <li>
	    	axis: 'x'
	    	<div id="draggable-axis-x" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	axis: 'y'
	    	<div id="draggable-axis-y" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	containment: 'document'
	    	<div id="draggable-containment-document" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	containment: 'parent'
	    	<div id="draggable-containment-parent" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	cursorAt: {top: 2, left: 2}
	    	<div id="draggable-cursorAt-top2-left2" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	cursorAt: {bottom: 20, right: 14}
	    	<div id="draggable-cursorAt-bottom20-right14" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	dragPrevention: 'a,input,textarea'
	    	<div id="draggable-dragPrevention" class='draggable'><a href="index.php">Drag me</a><input type="text" value="select me" style="width: 90px; font-size: 10px;" /></div>
	    </li>
	    <li>
	    	effect: ['fade', '']
	    	<div id="draggable-effect-fade-none" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	effect: ['', 'fade']
	    	<div id="draggable-effect-none-fade" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	effect: ['fade', 'fade']
	    	<div id="draggable-effect-fade-fade" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	grid: [50, 50]
	    	<div id="draggable-grid-50-50" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	handle: 'div'
	    	<div id="draggable-handle-div" class='draggable'><div class="drag-handle"></div>Drag me</div>
	    </li>
	    <li>
	    	helper: 'clone'
	    	<div id="draggable-helper-clone" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	helper: function() { return divHelper; }
	    	<div id="draggable-helper-function" class='draggable'>Drag me</div>
	    </li>
	    <li>
		opacity: 0.40
	    	<div id="draggable-opacity-40percent" class='draggable'>Drag me</div>
	    </li>
	    <li>
		preventionDistance: 40
	    	<div id="draggable-preventionDistance-40" class='draggable'>Drag me</div>
	    </li>
	    <li>
		preventionTimeout
		<div class="todo">complete demo</div>
	    </li>
	    <li>
	    	revert: true<br/>
		helper: 'clone'
	    	<div id="draggable-revert-helperClone" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	revert: true<br/>
		helper: 'original'
	    	<div id="draggable-revert-helperOriginal" class='draggable'>Drag me</div>
	    </li>
	    <li>
		scroll: true
	    	<div id="draggable-scroll-true" class='draggable'>Drag me</div>
	    </li>
	    <li>
		scroll: false
	    	<div id="draggable-scroll-false" class='draggable'>Drag me</div>
	    </li>
	    <li>
		wrapHelper
		<div class="todo">complete demo</div>
	    </li>
	    <li style='background: #eee; height: 300px; overflow: scroll;'>
	    	cursorAt: { top: -16, left: -16 } and overflowing container
	    	<div id="draggable-overflowingContainer" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	helper: 'clone'<br/>
		appendTo: 'body'
	    	<div id="draggable-helperClone-withAppendTo" class='draggable'>Drag me</div>
	    </li>
	    <li>
	    	helper: 'clone'
	    	<div id="draggable-helperClone-withoutAppendTo" class='draggable'>Drag me</div>
	    </li>
	  </ul>
	  <div id="simpledraggable" style='overflow: hidden;'>simple draggable</div>
	  <div id="simpledraggable-withclone" style='overflow: hidden;'>simple draggable - with clone</div>
	</fieldset>
	<fieldset>
	<legend>Callbacks</legend>
	  <ul>
	    <li>
		start
	    	<div id="draggable-start" class='draggable'>Drag me</div>
	    </li>
	    <li>
		drag<br/>
	    	custom drag modifier (circle dragging)
	    	<div id="draggable-drag-function-circle" class='draggable'>Drag me</div>
	    </li>
	    <li>
		stop
	    	<div id="draggable-stop" class='draggable'>Drag me</div>
	    </li>
	  </ul>
	</fieldset>



<script type="text/javascript">
$(document).ready(function(){

	$('#simpledraggable').draggable();
	$('#simpledraggable-withclone').draggable({
		helper: 'clone'
	});

	$('.todo').prepend(
		$(document.createElement('span'))
			.addClass('todo-label')
			.text('TODO: ')
	);

	$('#draggable-axis-x').draggable({
		axis:'x',
		name: 'axis-x'
	});

	$('#draggable-axis-y').draggable({
		axis:'y'
	});
	
	$('#draggable-containment-document').draggable({
		containment: 'document'
	});

	$('#draggable-containment-parent').draggable({
		containment: 'parent'
	});

	$('#draggable-cursorAt-top2-left2').draggable({
		cursorAt: {top: 2, left: 2}
	});

	$('#draggable-cursorAt-bottom20-right14').draggable({
		cursorAt: {bottom: 20, right: 14}
	});

	$('#draggable-dragPrevention').draggable({
		dragPrevention: 'a,input,textarea'
	});

	$('#draggable-effect-fade-none').draggable({
		effect: ['fade', ''],
		helper: 'clone'
	});

	$('#draggable-effect-none-fade').draggable({
		effect: ['', 'fade'],
		helper: 'clone'
	});

	$('#draggable-effect-fade-fade').draggable({
		effect: ['fade', 'fade'],
		helper: 'clone'
	});

	$('#draggable-grid-50-50').draggable({
		grid: [50, 50]
	});

	$('#draggable-handle-div').draggable({
		handle:'div'
	});

	$('#draggable-helper-clone').draggable({
		helper:'clone'
	});

	$('#draggable-helper-function').draggable({
		zIndex: 1000,
		helper: function() {
			var myHelper = document.createElement("div");
			$(myHelper).css({
				background: 'yellow',
				width: this.offsetWidth + 'px',
				height: this.offsetHeight + 'px',
				opacity: 0.6,
				position: 'absolute'
			});
			return myHelper;
		}
	});

	$('#draggable-opacity-40percent').draggable({
		opacity: 0.40
	});

	$('#draggable-preventionDistance-40').draggable({
		preventionDistance: 40
	});

	$('#draggable-revert-helperClone').draggable({
		revert: true,
		helper: 'clone'
	});

	$('#draggable-revert-helperOriginal').draggable({
		revert: true,
		helper: 'original'
	});

	$('#draggable-scroll-true').draggable({
		scroll: true
	});

	$('#draggable-scroll-false').draggable({
		scroll: false
	});

	$('#draggable-overflowingContainer').draggable({
		cursorAt: { top: -16, left: -16 }
	});
	
	$('#draggable-helperClone-withAppendTo').draggable({
		helper: 'clone',
		appendTo: 'body',
		effect: ['fade', 'fade']
	});

	$('#draggable-helperClone-withoutAppendTo').draggable({
		helper: 'clone',
		effect: ['fade', 'fade']
	});

	// Callbacks

	$('#draggable-start').draggable({
		start: function(e, ui) {
			$(ui.helper).css('background', '#4e9a06');
		}
	});

	$('#draggable-drag-function-circle').draggable({
		revert: true,
		drag: function(e, ui) {
			
			var centerx = 291, centery = 100;
			var angle = Math.atan((centery-ui.position.top)/(centerx-ui.position.left));
			if((centerx-ui.position.left)>=0)
				angle += Math.PI;
			var radius = 160;

			return {
				left: radius * Math.cos(angle) + centerx, 
				top: radius * Math.sin(angle) + centery
			}
		}
	});

	$('#draggable-stop').draggable({
		stop: function() {
			$(this).css('background', '#cc0000');
		}
	});

});
</script>

</body>
</html>

